<template>
    <div class="mui-popover mui-popover-action mui-popover-bottom slg-product-labels">
        <div class="select-content">

            <a class="sback" @tap.stop.prevent="closePanel">
                <span class="mui-icon mui-icon-close"></span>
            </a>

            <div style="padding: 15px; overflow-y: scroll">
                <div v-for="label in labels">
                    <span>
                        <i v-if="label.icon_style == 0" class="mui-icon mui-icon-checkmarkempty"></i>
                        <i v-if="label.icon_style == 1" class="mui-icon mui-icon-closeempty"></i>
                        {{ label.name }}
                    </span>
                    <p style="margin-left: 30px;">{{ label.subname }}</p>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
  import {ajax, apiDomain} from 'assets/js/Lib'

  export default {
    data() {
      return {

      }
    },
    computed: {},
    props: {
      labels: {
        type: Array,
        default: []
      },
    },
    watch: {

    },
    //实例初始化最之前，无法获取到data里的数据
    beforeCreate() {
    },
    //在挂载开始之前被调用
    beforeMount() {
    },
    //已成功挂载，相当ready()
    mounted() {

    },
    //相关操作事件
    methods: {
      closePanel: function () {
        mui('.slg-product-labels').popover('hide')
      },

    }
  }
</script>

<style lang="less">
    .slg-product-select {
        * {
            box-sizing: content-box !important;
        }
    }

    .select-content {
        width: 100%;
        min-height: 8rem;
        background-color: #fff;
        border-radius: 0;
    }

    .select-summary {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        box-shadow: 0 1px 0 rgba(0, 0, 0, .05), 0 0.5px 0 rgba(0, 0, 0, .09);
        padding: .333333333333rem;
        height: 2.4375rem;

        .img {
            position: relative;
            top: -1rem;
            background-color: #fff;
            z-index: 10;
            padding: .0625rem;
            border: 1px solid #ddd;
            border-radius: 4px;
            float: left;
            margin-right: 1em;
            height: 3.125rem;
            width: 3.125rem;
            display: -webkit-box;
            -webkit-box-align: center;
            -webkit-box-pack: center;
            background-size: cover !important;
            background-position: center center;
            background-repeat: no-repeat;
        }

        .sback {
            position: absolute;
            color: #8F8F94;
            right: .8rem;
            top: .1rem;

            .mui-icon {
                font-size: .75rem;
            }
        }
    }

    .main {
        overflow: hidden;
        .priceContainer {
            font-size: 0.4375rem;
            line-height: 0.4375rem;
            display: inline-block;
            vertical-align: middle;
            .price {
                padding: 0 .3333333333333rem 0 0;
                display: block;
                vertical-align: middle;
                height: .0 .5625rem;
                line-height: 0.5625rem;
                font-size: .5rem;
                color: #DD2727;

                .score {
                    font-size: .3333333333rem;
                    color: #333333;
                }
            }
        }

        .stock-control {
            font-size: .4rem;
            line-height: .6rem;
            .label {
                font-size: .4rem;
                margin-right: 5px;
            }
        }
        .sku-dtips {
            font-size: .4rem;
            line-height: .6rem;
            margin-right: .38rem;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            word-break: break-all;
            word-wrap: break-word;
            overflow: hidden;
        }
    }

    .select-body {
        width: 100%;
        max-height: 10rem;
        overflow: hidden;
        padding-bottom: 1.4rem;
        padding-top: 20px;
        .sku {
            width: 100%;
            float: left;
            min-height: 2.3rem;
        }
        .footer {
            width: 100%;
            padding-left: .333333333rem;
            padding-right: .333333333rem;
            min-height: 1rem;
            margin-top: .5rem;
            float: left;
            .left-text {
                position: absolute;
                line-height: 1rem;
                font-size: .5rem;
            }
            .text-right {
                font-size: .3rem;
                color: #333333;
                opacity: .5;
            }
        }
        .cart-bar {
            position: absolute;
            bottom: 0;
            width: 100%;
            padding: .2rem 0;
            text-align: center;
            color: #ffffff;
            height: .6rem;
            line-height: .6rem;
            background: #FF9500;
            font-size: .4rem;
        }
        .cart-bar-disable {
            background: #ccc;
        }
    }
</style>
